---
title: الأزرار
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

قائمة الأزرار ومجموعات الأزرار المستخدمة في التطبيق.

## زر

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| المحددات                       | النوع                 | الوصف                                                                                                                  |
| ------------------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| className                      | string                | اسم فئة اختياري لتنسيقات إضافية                                                                                        |
| أيقونة                         | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر                                                                                     |
| العنوان                        | string                | محتوى نصي للزر                                                                                                         |
| عرض كامل                       | قيمة منطقية           | يحدد ما إذا كان الزر يجب أن يمتد على كامل عرض الحاوية                                                                  |
| التنوع                         | string                | النمط البصري للزر. Options include `primary`, `secondary`, and `tertiary`                              |
| الحجم                          | string                | حجم الزر. يوجد خياران: `صغير` و `متوسط`                                                |
| الموقع                         | string                | موقع الزر بالنسبة لأخوته. Options include: `standalone`, `left`, `right`, and `middle` |
| accent                         | string                | موقع الزر بالنسبة لأخوته. Options include: `standalone`, `left`, `right`, and `middle` |
| قريباً                         | قيمة منطقية           | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة)                                      |
| معطل                           | قيمة منطقية           | يحدد إذا كان الزر معطل أم لا                                                                                           |
| تركيز                          | قيمة منطقية           | يحدد إذا كان الزر في وضع التركيز                                                                                       |
| عند_النقر | function              | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر                                                                           |

</Tab>

</Tabs>

## مجموعة الأزرار

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| المحددات     | النوع                 | الوصف                                                                                                              |
| ------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------ |
| className    | string                | اسم اختياري لتنسيقات إضافية                                                                                        |
| أيقونة       | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر                                                                                 |
| العنوان      | string                | محتوى نصي للزر                                                                                                     |
| الحجم        | string                | حجم الزر. يوجد خياران: `صغير` و `متوسط`                                            |
| الموقع       | string                | موقع الزر بالنسبة لأخوته. Options include: `standalone`, `left`, `middle`, `right` |
| تطبيق الظل   | قيمة منطقية           | يحدد إذا ما سيتم تطبيق الظلال على الزر                                                                             |
| تطبيق الضباب | قيمة منطقية           | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر                                                                  |
| معطل         | قيمة منطقية           | يحدد ما إذا كان الزر معطل                                                                                          |
| تركيز        | قيمة منطقية           | يحدد إذا كان الزر في وضع التركيز                                                                                   |

</Tab>
</Tabs>

## مجموعة الأزرار العائمة

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| المحددات | النوع      | الوصف                                                                   | الإعداد الافتراضي |
| -------- | ---------- | ----------------------------------------------------------------------- | ----------------- |
| الحجم    | string     | حجم الزر. يوجد خياران: `صغير` و `متوسط` | صغير              |
| الأبناء  | مكون React | مجموعة من عناصر React تمثل الأزرار الفردية داخل المجموعة                |                   |

</Tab>

</Tabs>

## زر رمز عائم

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| المحددات                       | النوع                 | الوصف                                                                                                                  |
| ------------------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| className                      | string                | اسم اختياري لتنسيقات إضافية                                                                                            |
| أيقونة                         | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر                                                                                     |
| الحجم                          | string                | حجم الزر. يوجد خياران: `صغير` و `متوسط`                                                |
| الموقع                         | string                | موقع الزر بالنسبة لأخوته. Options include: `standalone`, `left`, `right`, and `middle` |
| تطبيق الظل                     | قيمة منطقية           | يحدد إذا ما سيتم تطبيق الظلال على الزر                                                                                 |
| تطبيق الضباب                   | قيمة منطقية           | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر                                                                      |
| معطل                           | قيمة منطقية           | يحدد ما إذا كان الزر معطل                                                                                              |
| تركيز                          | قيمة منطقية           | يحدد إذا كان الزر في وضع التركيز                                                                                       |
| عند_النقر | function              | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر                                                                           |
| فعّال                          | قيمة منطقية           | يحدد إذا كان الزر في وضع فعّال                                                                                         |

</Tab>

</Tabs>

## مجموعة أزرار الرموز العائمة

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| المحددات     | النوع  | الوصف                                                                                                                                                                                                                                             |
| ------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className    | string | اسم اختياري لتنسيقات إضافية                                                                                                                                                                                                                       |
| الحجم        | string | حجم الزر. يوجد خياران: `صغير` و `متوسط`                                                                                                                                                                           |
| أزرار الرموز | array  | مجموعة من الكائنات، يمثل كل منها زر رمز في المجموعة. يجب أن يشمل كل كائن مكون الرمز الذي تريد عرضه في الزر، الوظيفة التي ترغب في استدعائها عند نقر المستخدم على الزر، وما إذا كان الزر ينبغي أن يكون نشطًا أم لا. |

</Tab>

</Tabs>

## Light Button

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| المحددات  | النوع             | الوصف                                                              |
| --------- | ----------------- | ------------------------------------------------------------------ |
| className | string            | اسم اختياري لتنسيقات إضافية                                        |
| أيقونة    | `React.ReactNode` | الرمز الذي تريد عرضه في الزر                                       |
| العنوان   | string            | محتوى نصي للزر                                                     |
| accent    | string            | النمط البصري للزر. تشمل الخيارات `أساسي` و `ثانوي` |
| نشط       | قيمة منطقية       | يحدد إذا كان الزر في وضع فعّال                                     |
| معطل      | قيمة منطقية       | يحدد ما إذا كان الزر معطل                                          |
| تركيز     | قيمة منطقية       | يحدد إذا كان الزر في وضع التركيز                                   |
| عند النقر | وظيفة             | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر                       |

</Tab>

</Tabs>

## زر أيقونة خفيف

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| المحددات  | النوع                 | الوصف                                                                            |
| --------- | --------------------- | -------------------------------------------------------------------------------- |
| className | string                | اسم اختياري لتنسيقات إضافية                                                      |
| testId    | string                | معرف اختبار للزر                                                                 |
| أيقونة    | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر                                               |
| العنوان   | string                | محتوى نصي للزر                                                                   |
| الحجم     | string                | حجم الزر. يوجد خياران: `صغير` و `متوسط`          |
| accent    | string                | لون الزر المميز لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
| نشط       | قيمة منطقية           | يحدد إذا كان الزر في وضع فعّال                                                   |
| معطل      | قيمة منطقية           | يحدد ما إذا كان الزر معطل                                                        |
| تركيز     | قيمة منطقية           | يحدد إذا كان الزر في وضع التركيز                                                 |
| عند النقر | function              | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر                                     |

</Tab>

</Tabs>

## الزر الرئيسي

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| المحددات       | النوع                            | الوصف                                                                                               |
| -------------- | -------------------------------- | --------------------------------------------------------------------------------------------------- |
| العنوان        | string                           | محتوى نصي للزر                                                                                      |
| عرض كامل       | قيمة منطقية                      | يحدد ما إذا كان الزر يجب أن يمتد على كامل عرض الحاوية                                               |
| التنوع         | string                           | النمط البصري للزر. لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
| قريباً         | قيمة منطقية                      | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة)                   |
| أيقونة         | `React.ComponentType`            | مكون أيقونة اختياري يظهر داخل الزر                                                                  |
| خصائص زر React | `React.ComponentProps<'button'>` | كل خصائص زر HTML القياسية مدعومة                                                                    |

</Tab>

</Tabs>

## زر أيقونة دائري

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| المحددات       | النوع                                           | الوصف |
| -------------- | ----------------------------------------------- | ----- |
| أيقونة         | `React.ComponentType`                           |       |
| خصائص زر React | `React.ButtonHTMLAttributes<HTMLButtonElement>` |       |

</Tab>

</Tabs>
